<template>
	<view>
		<view class="select-box">
			<sun-dropDown v-on:onSubmitAddress="onSubmitAddress"></sun-dropDown>
		</view>
		<view class="dates-box ">
			<view style="width: 100%;" class="dates f-row-between">
				<view class="date f-center" :style="{ width: 100 / 5 - 3 + '%' }" :class="selected == 'd' ? 'selected' : ''" @click="selected = 'd'">
					今日
				</view>
				<view class="date f-center" :style="{ width: 100 / 5 - 3 + '%' }" :class="selected == 'zr' ? 'selected' : ''"
				 @click="selected = 'zr'">
					昨日
				</view>
				<view class="date f-center" :style="{ width: 100 / 5 - 3 + '%' }" :class="selected == 'z' ? 'selected' : ''" @click="selected = 'z'">
					本周
				</view>
				<view class="date f-center" :style="{ width: 100 / 5 - 3 + '%' }" :class="selected == 'm' ? 'selected' : ''" @click="selected = 'm'">
					本月
				</view>
				<view class="date f-center" :style="{ width: 100 / 5 - 1.5 + '%' }" :class="selected == 'zdy' ? 'selected' : ''"
				 @click="selected = 'zdy'">
					自定义
				</view>
			</view>
			<sun-Dates :selected="selected" :showDate="true" @onSubmit="onSubmitDate"></sun-Dates>
		</view>
		<view class="total-box f-row-between">
			<view class="item f-column-WHcenter" v-for="(val, key, i) in resData.posyccount" v-if="key != 'length'" :style="{ backgroundImage: resData.posyccount[key].backgroundImage, width: 100 / resData.posyccount.length - 1.5 + '%' }">
				<view>
					<label class="title">{{ resData.posyccount[key].name }}</label>
				</view>
				<view class="money f-center">
					<label v-show="resData.posyccount[key].name != '异常总笔数'">￥</label>
					<label>{{ resData.posyccount[key].numder }}</label>
					<label class="unit">{{ resData.posyccount[key].name == '消费占比' ? '%' : resData.posyccount[key].unit }}</label>
				</view>
			</view>
		</view>
		<view class="tietle-box paddinglr20" v-show="resData.typeHeader.length > 0">
			<sun-tietleBox :tietleData="'异常类型'" :showLine="false"></sun-tietleBox>
		</view>
		<view class="abnormal-box paddinglr20 f-row-Wcenter">
			<view class="items" >
				<view class="item" v-for="(val, key, i) in resData.typeHeader" v-if="key != 'length'" :style="{ width: 100 / 4 - 2.9 + '%' }">
					<view class="money f-center">
						<view class="f-column-Wcenter">
							<view>{{ resData.typeHeader[key].name }}</view>
							<view>({{ resData.typeHeader[key].numder }})</view>
							<label class="unit">{{ resData.typeHeader[key].unit }}</label>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tietle-box">
			<sun-tietleBox :tietleData="'单据列表'" :showLine="false"></sun-tietleBox>
		</view>
		<view :id="idTopHeight" class="table-box f-row-Wcenter" :style="{ margin: 0 + ' ' + tableMargin + 'rpx' }">
			<scroll-view :scroll-y="true" class="scroll-Y" :style="{ maxHeight: topHeight + 'rpx' }" @scrolltolower="lower">
				<view class="listitem" v-for="(item, index) in resData.list" :key="index" @click="toPage(item)">
					<view class="top f-row-between f-row-Hcenter">
						<view class=" f-column">
							<view class="line f-row-Hcenter">
								<label>业务单号：</label>
								<label>{{ item.sheet_no }}</label>
							</view>
							<view class="line f-row-Hcenter">
								<label>操作员：</label>
								<label>{{ item.oper_name || item.oper_id }}</label>
							</view>
						</view>
						<view class=" f-column">
							<view class="line f-row-Hcenter f-row-end" style="text-align: right;">
								<view class="btn">{{ item.yc_name }}</view>
							</view>
							<view class="line f-row-Hcenter">
								<label>操作金额：</label>
								<label>￥{{ item.zk_amt | toFIex }}</label>
							</view>
						</view>
					</view>
					<view class="bottom f-row-between f-row-Hcenter">
						<view class="lfet f-row-Hcenter">
							<label>时间：</label>
							<label>{{ item.oper_date | yyyy_MM_dd }}</label>
						</view>
						<view class="right f-center " @click="toPage(item)">
							<label class="det vertical-align: text-bottom">单据详情</label>
							<view class="icons iconarrow-right f-row-Hcenter vertical-align: text-bottom"></view>
						</view>
					</view>
				</view>
				<view class="toastTitle">{{ query.toastTitle }}</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import sunTietleBox from '@/components/sun-titleBox/sun-tietleBox.vue';
	import sunDates from '@/components/sun-Dates/sun-Dates.vue';
	import sunDropDown from '@/components/sun-dropDown/sun-dropDown.vue';

	export default {
		components: {
			sunDates,
			sunTietleBox,
			sunDropDown
		},
		data() {
			return {
				selected: 'd',

				systemInfo: {},
				//查询
				query: {
					oper_no: '%', // varchar(4) 操作员编号 %或不传表示全部
					deal_no: '%', //varchar(20) 当班单号 %或不传表示全部
					branch_jg: '%', // varchar(4) 机构 %或不传表示全部
					start_date: 10000, //是 long 开始时间
					end_date: 10000, // 是 long 结束时间
					pageindex: 1, //是 int 页数
					pagesize: 10, //是 int 页大小
					ischange: true
				},
				query1: {
					oper_no: '%', // varchar(4) 操作员编号 %或不传表示全部
					deal_no: '%', // varchar(20) 当班单号 %或不传表示全部
					branch_jg: '%', // varchar(4) 机构 %或不传表示全部
					start_date: 10000, //是 long 开始时间
					end_date: 10000 //是 long 结束时间
				},
				//列表高度
				idTopHeight: 'table-box',
				tableMargin: 20,
				topHeight: 300,
				resData: {
					abnormalTotal: {
						rec_tot: 0,
						chgprc: 0,
						delitem: 0,
						hangup: 0,
						retitem: 0,
						ml: 0,
						giveitem: 0,
						delsheet: 0,
						delhangup: 0,
						sheetzk: 0,
						zk_amt: 0,
						length: 11
					},
					typeHeader: {

					},
					abnormalHeader: {
						rec_tot: {
							name: '总记录数',
							backgroundImage: 'linear-gradient(to top right, rgba(219, 240, 253, 1.0), rgba(255, 129, 125, 1.0))'
						},
						chgprc: {
							name: '单品改价',
							backgroundImage: 'linear-gradient(to top right, rgba(219, 240, 253, 1.0), rgba(255, 129, 125, 1.0))'
						},
						delitem: {
							name: '单品删除',
							backgroundImage: 'linear-gradient(to top right, rgba(219, 240, 253, 1.0), rgba(255, 129, 125, 1.0))'
						},
						hangup: {
							name: '挂单',
							backgroundImage: 'linear-gradient(to top right, rgba(219, 240, 253, 1.0), rgba(255, 129, 125, 1.0))'
						},
						retitem: {
							name: '商品退货',
							backgroundImage: 'linear-gradient(to top right, rgba(219, 240, 253, 1.0), rgba(255, 129, 125, 1.0))'
						},
						ml: {
							name: '手动抹零',
							backgroundImage: 'linear-gradient(to top right, rgba(219, 240, 253, 1.0), rgba(255, 129, 125, 1.0))'
						},
						giveitem: {
							name: '商品赠送',
							backgroundImage: 'linear-gradient(to top right, rgba(219, 240, 253, 1.0), rgba(255, 129, 125, 1.0))'
						},
						delsheet: {
							name: '整单删除',
							backgroundImage: 'linear-gradient(to top right, rgba(219, 240, 253, 1.0), rgba(255, 129, 125, 1.0))'
						},
						delhangup: {
							name: '删除挂单',
							backgroundImage: 'linear-gradient(to top right, rgba(219, 240, 253, 1.0), rgba(255, 129, 125, 1.0))'
						},
						sheetzk: {
							name: '整单打折',
							backgroundImage: 'linear-gradient(to top right, rgba(219, 240, 253, 1.0), rgba(255, 129, 125, 1.0))'
						},
						zk_amt: {
							name: '变动金额',
							backgroundImage: 'linear-gradient(to top right, rgba(219, 240, 253, 1.0), rgba(255, 129, 125, 1.0))'
						}
					},

					posyccount: {
						rec_tot: {
							numder: 3,
							name: '异常总笔数',
							backgroundImage: 'linear-gradient(to top right, RGBA(249, 197, 150, 1), RGBA(241, 121, 142, 1))'
						},
						zk_amt: {
							numder: 6.3,
							name: '异常总金额',
							backgroundImage: 'linear-gradient(to top right, rgba(243, 243, 0, 1.0), rgba(232, 198, 2, 1.0))'
						},
						length: 2
					},
					list: [
						// {
						// 	softid: 884821,
						// 	sheet_no: '4164654651134666',
						// 	oper_id: '1001',
						// 	oper_name: '系统管理员',
						// 	yc_type: 0,
						// 	yc_name: '静态数据',
						// 	oper_date: 1611543569000,
						// 	zk_amt: 0.0
						// }
					]
				}
			};
		},
		onLoad() {


			uni.getSystemInfo({
				success: res => {
					//debugger//windowWidth pixelRatio
					this.systemInfo = res;
					this.systemInfo.Width = this.systemInfo.windowWidth * this.systemInfo.pixelRatio;

					//let data =(100 /4) - ((this.systemInfo.Width-140)/this.systemInfo.Width) * 3;
					//console.log('data>>>',data)
				}
			});
		},
		computed: {
			userInfo() {
				let userInfo = this.$store.getters.getUserInfo;
				userInfo.wxUser = userInfo.wxUser ? userInfo.wxUser : {};
				return userInfo;
			}
		},
		methods: {
			toPage(item) {
				this.$util.navigateTo({
					url: '/packageA/abnormal/abnormalDet?sheet_no=' + item.sheet_no
				});
			},
			onSubmitAddress(e) {
				this.query.branch_jg = e.address.branch_no;
				this.query.branch_name = e.address.branch_name;
				this.getlogin();
			},
			onSubmitDate(e) {
				this.query = { ...this.query,
					...e
				};
				this.query1 = { ...this.query,
					...e
				};
				this.getTotal();
				this.getlogin();
			},
			getlogin() {
				this.$api_server.dwzy_GetSheetPosYcAnalysisList({
					data: this.query,
					success: res => {
						if (res.data) {
							//收银合计
							let query = this.query;
							let posyccount = res.data.data.posyccount;
							for (let key in this.resData.posyccount) {
								if (posyccount[key]) {
									this.resData.posyccount[key] = { ...this.resData.posyccount[key],
										...this.$util.moneyUnit(posyccount[key])
									};
								}
							}
							if (this.query.pageindex == 1) {
								this.resData.list = res.data.data.posyclist;
							} else {
								this.resData.list = [...this.resData.list, ...res.data.data.posyclist];
							}
							this.$util.getTopHeight(this, this.idTopHeight, this.tableMargin);

							let listlength = this.resData.list.length;
							let totalCount = posyccount.rec_tot;
							this.query.totalPage = Math.ceil(totalCount / this.query.pagesize);

							if (listlength > 0) {
								if (listlength >= totalCount) {
									this.query.toastTitle = '没有更多了!';
								} else {
									this.query.toastTitle = '加载更多...';
								}
							} else {
								this.query.toastTitle = '没有更多了!';
							}
							this.query = query;
						}
					},
					fail(error) {
						console.log('rerror>>>', error);
					}
				});
			},
			// 下拉刷新
			lower: function(e) {
				this.query.pageindex++;
				if (this.query.pageindex > this.query.totalPage) {
					return;
				}
				this.query.toastTitle = '加载中...';

				this.getlogin('more');
			},
			getTotal() {

				let date = {
					"oper_no": true,
					"deal_no": true,
					"branch_jg": true,
					"start_date": true,
					"end_date": true
				}
				for (let key in this.query1) {
					if (!date[key]) {
						delete this.query1[key]
					}
				}
				
				this.$api_server.dwzy_GetPosycTotal({
					data: this.query1,
					success: res => {
						if (res.data) {
							this.resData.abnormalTotal = res.data.data;
							this.resData.typeHeader = {
								length: 0
							};
							
							for (let key in this.resData.abnormalTotal) {
								//算类别总数转换中文单位

								if (this.resData.abnormalTotal[key] > 0) {
									this.resData.typeHeader.length += 1;
									let item = this.$util.moneyUnit(this.resData.abnormalTotal[key]);
									this.resData.typeHeader[key] = { ...this.resData.abnormalHeader[key],
										...item
									};
									
								}
							}
							console.log('this.resData.typeHeader>>>>',this.resData.typeHeader)
						}
					},
					fail(error) {
						console.log('rerror>>>', error);
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.select-box {
		margin-top: 20upx;
		padding: 0 20upx;
	}

	.dates-box {
		padding: 20upx 20upx;
		border-radius: 20upx 20upx 0 0;
		background-color: rgba($color: #ffffff, $alpha: 1);
	}

	.tietle-box {
		padding: 0 20upx;
	}

	.total-box {
		padding: 20upx 20upx;
		padding: 0 20upx 20upx 20upx;
		background-color: rgba(255, 255, 255, 1);

		.item {

			
			padding: 25upx;
			border-radius: 10upx;
			box-shadow: 2rpx 2rpx 15rpx rgba(224, 32, 32, 0.2);

			.title {
				font-family: Source Han Sans CN;
				color: #fcfdfd;
			}

			.money {
				width: 100%;

				label:nth-of-type(1) {
					height: 38upx;
					line-height: 60upx;
					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #fcfdfd;
				}

				label:nth-of-type(2) {
					height: 38upx;
					font-size: 40upx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #fcfdfd;
				}

				.unit {
					height: 38upx;
					font-size: 40upx;
					font-family: Source Han Sans CN;
					font-weight: 600;
					color: #fcfdfd;
				}
			}
		}
	}


	.paddinglr20,
	.paddinglr20.tietle-box {
		padding: 0upx 20upx !important;
		background-color: #ffffff;
		border-radius: 0upx;
	}

	.paddinglr20.tietle-box {
		padding: 0upx 20upx !important;
		background-color: #ffffff;
		border-radius: 0upx;
	}

	.abnormal-box {
		border-radius: 0 0 20upx 20upx;
		padding: 20upx 0px 20upx 0px;
		.items {
			width: 100%;
			padding-bottom: 20upx;
			.item {
				border: 1px solid #0EA391;
				display: inline-block;
				border-radius: 10upx;
				margin: 10upx;
				height: 120upx;
				color: #fff;
				box-shadow: 2rpx 2rpx 15rpx rgba(224, 32, 32, 0.2);

				.money {
					height: 100%;
					color: #e72113;
				}
			}
		}
	}

	.table-box {
		border-radius: 20upx;

		.scroll-Y {
			.listitem {
				padding: 20upx;
				margin: 10upx 0;
				border-radius: 15upx;
				background: rgba(255, 255, 255, 1);

				&:nth-of-type(1) {
					margin-top: 0;
				}

				.line {
					.btn {
						padding: 0 10upx;
						border-radius: 10upx;
						background-color: red;
						color: #fff;
					}

					label {
						&:nth-of-type(1) {
							width: 150upx;
							text-align: right;
						}
					}
				}

				.bottom {
					margin-top: 10upx;
					padding-top: 10upx;
					border-top: 1px solid rgba(225, 225, 225, 0.9);

					.lfet {
						label {
							&:nth-of-type(1) {
								width: 150upx;
								text-align: right;
							}
						}
					}

					.det {
						&:nth-of-type(1) {
							font-size: 26upx;
							line-height: 28upx;
							color: rgba(170, 170, 255, 1);
						}
					}

					.right {
						.iconarrow-right {
							margin-left: 10upx;
							color: rgba(170, 170, 255, 1);
							font-size: 22upx;
							line-height: 28upx;
						}
					}
				}
			}
		}
	}

	.toastTitle {
		width: 100%;
		text-align: center;
		color: rgba(216, 216, 216, 0.9);
	}
</style>
